import React, {Component} from 'react';

/*
参数
fields={[
  {text: '表头名称', name: '对应字段名称'}
]}
datas={[
  {字段名称: 值, ...}
]}
可选
onModify={this.fnModify.bind(this)}
onDelete={this.fnDelete.bind(this)}
*/
class Table extends Component {
  constructor (...args) {
    super(...args);
  }
  fnModify (ID) {
    this.props.onModify && this.props.onModify(ID);
  }
  fnDelete (ID) {
    this.props.onDelete && this.props.onDelete(ID);
  }
  render () {
    return (
      <table className="table">
        <thead>
          <tr>
            <th>
              <input type="checkbox" name="" value=""/>
            </th>
            <th>ID</th>
            {
              this.props.fields.map((field, index) => (
                <th key={field.name}>{field.text}</th>
              ))
            }
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {
            this.props.datas.map(data => (
              <tr key={data.ID}>
                <td>
                  <input type="checkbox" name="" value=""/>
                </td>
                <td>{data.ID}</td>
                {
                  this.props.fields.map((field, index) => (
                    <td key={index}>{data[field.name]}</td>
                  ))
                }
                <td>
                  <button type="button" className="btn btn-default" onClick={this.fnModify.bind(this, data.ID)}>修改</button>
                  <button type="button" className="btn btn-danger" onClick={this.fnDelete.bind(this, data.ID)}>删除</button>
                </td>
              </tr>
            ))
          }
        </tbody>
      </table>
    )
  }
}

export default Table;
